<template>
    <div class="wrapper">
        <h1>LoveTalk</h1>
        <button @click="getLoveTalk">获取一句土味情话</button>
        <ul>
            <li v-for="(item, index) in loveTalkList" :key="item.id">{{ item.title }}</li>
        </ul>
    </div>
</template>

<script lang="ts" setup name="LoveTalk">

import { ref, reactive } from 'vue'
import { storeToRefs } from 'pinia';
import { useLoveTalkStore } from '@/store/loveTalk'

const loveTalkStore = useLoveTalkStore()
const { loveTalkList } = storeToRefs(loveTalkStore)

// 监听数据变动
loveTalkStore.$subscribe((mutation, state) => {
    // 本地缓存
    window.localStorage.setItem('LOVE_TALK_CACHE', JSON.stringify(state.loveTalkList))
})

async function getLoveTalk() {
    loveTalkStore.fetchTalk()
}

</script>


<style scoped>
.wrapper {
    background-color: orange;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px
}

button {
    margin: 0 5px;
}
</style>